<template>
  <el-form>
    <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
      <el-radio-button value="1">销售合同详情</el-radio-button>
      <el-radio-button
        v-if="purchaseContractId != ''"
        value="2"
        @click="getProcureInfo()"
        >采购合同详情</el-radio-button
      >
      <el-radio-button value="0" @click="getExamineTableData()"
        >审批记录</el-radio-button
      >
    </el-radio-group>
    <!-- 销售合同详情 -->
    <div v-if="tabPosition === '1'">
      <el-card shadow="never" style="margin-top: 1%">
        <template #header>项目信息</template>
        <el-form label-width="180px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="合同类型">
                <el-radio-group v-model="salesMainContractModel.contractMethod">
                  <el-radio value="0" size="default" disabled
                    >电线电缆以及光纤光缆</el-radio
                  >
                  <el-radio value="1" size="default" disabled
                    >电梯及扶梯</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="采购单位">
                <el-input
                  v-model="salesMainContractModel.purchaseDeptName"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目所属分公司">
                <el-input
                  v-model="salesMainContractModel.projectDeptName"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目名称">
                <el-input
                  v-model="salesMainContractModel.projectName"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目地址">
                <el-input
                  v-model="salesMainContractModel.projectAddress"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目联系人">
                <el-input
                  v-model="salesMainContractModel.projectManager"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话">
                <el-input
                  v-model="salesMainContractModel.projectManagerPhone"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card shadow="never" style="margin-top: 1%">
        <template #header>合约方信息</template>
        <el-form label-width="180px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="供应厂商">
                <el-select
                  v-model="salesMainContractModel.supplierCategoryName"
                  placeholder="请选择 供应商品类"
                  disabled
                >
                  <el-option
                    v-for="item in supplierCategoryNameOptions"
                    :key="item.key"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="20">
                <el-input
                  v-model="salesMainContractModel.supplierDeptName"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="供应商">
                <el-input
                  v-model="salesMainContractModel.supplyDeptName"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="询价单号">
                <el-input v-model="salesMainContractModel.inquiryNo" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同编号">
                <el-input
                  v-model="salesMainContractModel.contractNo"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同名称">
                <el-input
                  v-model="salesMainContractModel.contractName"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="采购负责人">
                <el-input
                  v-model="salesMainContractModel.purchasePersonName"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话">
                <el-input
                  v-model="salesMainContractModel.purchasePhone"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="允许超合同金额">
                <el-radio-group v-model="salesMainContractModel.isPriceFlag">
                  <el-radio value="0" size="default" disabled>不允许</el-radio>
                  <el-radio value="1" size="default" disabled>允许</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="允许超合同材料数量">
                <el-radio-group v-model="salesMainContractModel.isNumFlag">
                  <el-radio value="0" size="default" disabled>不允许</el-radio>
                  <el-radio value="1" size="default" disabled>允许</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card shadow="never" style="margin-top: 1%">
        <template #header>其他信息</template>
        <el-form label-width="180px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="合同总量">
                <el-input
                  v-model="salesMainContractModel.contractNum"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="签订日期">
                <el-input v-model="salesMainContractModel.signDate" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="回款截止日期">
                <el-input
                  v-model="salesMainContractModel.paymentDeadlineDate"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="合同总额含税（元）">
                <el-input
                  v-model="salesMainContractModel.contractTotalPrice"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同总额实际含税（元）">
                <el-input
                  v-model="salesMainContractModel.contractTotalRealPrice"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="20">
                <el-input
                  v-model="salesMainContractModel.contractTotalRealPriceMark"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input
                  v-model="salesMainContractModel.mark"
                  type="textarea"
                  :rows="1"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同附件">
                <el-upload
                  v-model:file-list="salesFileList"
                  class="upload-demo"
                  multiple
                  :on-preview="salesFileHandlePreview"
                  style="width: 80%"
                  :before-remove="salesFileBeforeRemove"
                >
                  <el-button :icon="Upload" color="#1E3485" disabled
                    >点击上传</el-button
                  >
                  <template #tip>
                    <div class="el-upload__tip">文件大小不能超过10M</div>
                  </template>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card shadow="never" style="margin-top: 1%">
        <template #header>合同付款方式</template>
        <el-form label-width="180px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="价格类型">
                <el-radio-group
                  v-model="salesSecondContractModel.priceType"
                  disabled
                >
                  <el-radio value="0" size="default">锁定</el-radio>
                  <el-radio value="1" size="default">浮动</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="支付说明">
                <el-input
                  v-model="salesSecondContractModel.priceTypeMark"
                  type="textarea"
                  :rows="1"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                v-if="salesSecondContractModel.priceType === '1'"
                label="基准价（元）"
              >
                <el-input
                  v-model="salesSecondContractModel.basePrice"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                v-if="salesSecondContractModel.priceType === '1'"
                label="涨幅"
              >
                <el-input
                  v-model="salesSecondContractModel.increasePrice"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                v-if="salesSecondContractModel.priceType === '1'"
                label="涨幅比率"
              >
                <el-input
                  v-model="salesSecondContractModel.increaseRate"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="付款周期">
                <el-radio-group
                  v-model="salesSecondContractModel.paymentCycle"
                  disabled
                >
                  <el-radio value="0" size="default">到货结算</el-radio>
                  <el-radio value="1" size="default">款清发货</el-radio>
                  <el-radio value="2" size="default">月度结算</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="付款节点">
                <!-- <el-checkbox label="合同预付款" disabled />
                <el-checkbox label="订单预付款" disabled /> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <vxe-table
          border
          min-height="300px"
          header-align="center"
          :column-config="{ resizable: true }"
          :row-config="{ isHover: true }"
          :data="salesNodePayTableData"
          :loading="salesNodePayTableLoading"
          size="mini"
          style="margin-left: 180px"
        >
          <vxe-column
            v-for="column in salesNodePayTableColumns"
            :key="column.field"
            :field="column.field"
            :title="column.title"
            :min-width="column.width"
            :align="column.align"
          >
            <!-- 节点类型 -->
            <template
              v-if="column.field == 'nodeType'"
              v-slot:default="{ row }"
            >
              <vxe-select
                v-model="row.nodeType"
                placehoder=""
                style="display: inline-block"
                placement="bottom-start"
                disabled
              >
                <vxe-option
                  v-for="item in salesNodeTypeOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </vxe-select>
            </template>
            <!-- 付款节点时间 && 电线电缆 -->
            <template
              v-else-if="
                column.field === 'payTime' &&
                salesMainContractModel.contractMethod === '0'
              "
              v-slot:default="{ row }"
            >
              <vxe-select
                v-model="row.nodeTriggerType"
                style="width: 30%; display: inline-block"
                placement="bottom-start"
                disabled
              >
                <vxe-option
                  v-for="(item, index) in getSalesAvailableNodeTriggerTypeList(
                    salesSecondContractModel.paymentCycle,
                    row.nodeType
                  )"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                />
              </vxe-select>
              &nbsp;
              <!-- 付款节点时间 - 自定义&&月度结算&&订单实付款 -->
              <vxe-input
                v-if="
                  row.nodeTriggerType === '9' &&
                  salesSecondContractModel.paymentCycle === '2' &&
                  row.nodeType === '2'
                "
                v-model="row.nodeTriggerTypeName"
                style="width: 30%; display: inline-block"
                disabled
              />
              <!-- 付款节点时间 - 自定义&&月度结算&&非订单实付款 (用不上) -->
              <!-- 付款节点时间 - 自定义&&非月度结算&&订单实付款 -->
              <vxe-input
                v-if="
                  row.nodeTriggerType === '9' &&
                  salesSecondContractModel.paymentCycle != '2' &&
                  row.nodeType === '2'
                "
                v-model="row.nodeTriggerTypeName"
                style="width: 30%; display: inline-block"
                disabled
              />
              <!-- 付款节点时间 - 自定义&&非月度结算&&非订单实付款 (用不上) -->
              <!-- 付款节点时间 - 非自定义&&月度结算&&订单实付款 -->
              <vxe-input
                v-if="
                  row.nodeTriggerType != '9' &&
                  salesSecondContractModel.paymentCycle === '2' &&
                  row.nodeType === '2'
                "
                v-model="row.monthDay"
                type="number"
                style="width: 15%; display: inline-block"
                :min="0"
                disabled
              />
              <span
                v-if="
                  row.nodeTriggerType != '9' &&
                  salesSecondContractModel.paymentCycle === '2' &&
                  row.nodeType === '2'
                "
                >（个月）</span
              >
              <vxe-input
                v-if="
                  row.nodeTriggerType != '9' &&
                  salesSecondContractModel.paymentCycle === '2' &&
                  row.nodeType === '2'
                "
                v-model="row.natureDay"
                type="number"
                style="width: 15%; display: inline-block"
                :min="0"
                disabled
              />
              <span
                v-if="
                  row.nodeTriggerType != '9' &&
                  salesSecondContractModel.paymentCycle === '2' &&
                  row.nodeType === '2'
                "
                >（日）</span
              >
              <!-- 付款节点时间 - 非自定义&月度结算&&非订单实付款 -->
              <vxe-input
                v-if="
                  row.nodeTriggerType != '9' &&
                  salesSecondContractModel.paymentCycle === '2' &&
                  row.nodeType != '2'
                "
                v-model="row.natureDay"
                type="number"
                style="width: 15%; display: inline-block"
                :min="0"
                disabled
              />
              <span
                v-if="
                  row.nodeTriggerType != '9' &&
                  salesSecondContractModel.paymentCycle === '2' &&
                  row.nodeType != '2'
                "
                >（个自然日）</span
              >
              <!-- 付款节点时间 - 非自定义&&非月度结算&&订单实付款 -->
              <vxe-input
                v-if="
                  row.nodeTriggerType != '9' &&
                  salesSecondContractModel.paymentCycle != '2' &&
                  row.nodeType === '2'
                "
                v-model="row.natureDay"
                type="number"
                style="width: 15%; display: inline-block"
                :min="0"
                disabled
              />
              <span
                v-if="
                  row.nodeTriggerType != '9' &&
                  salesSecondContractModel.paymentCycle != '2' &&
                  row.nodeType === '2'
                "
                >（个自然日）</span
              >
              <!-- 付款节点时间 - 非自定义&&非月度结算&&非订单实付款 -->
              <vxe-input
                v-if="
                  row.nodeTriggerType != '9' &&
                  salesSecondContractModel.paymentCycle != '2' &&
                  row.nodeType != '2'
                "
                v-model="row.natureDay"
                type="number"
                style="width: 15%; display: inline-block"
                :min="0"
                disabled
              />
              <span
                v-if="
                  row.nodeTriggerType != '9' &&
                  salesSecondContractModel.paymentCycle != '2' &&
                  row.nodeType != '2'
                "
                >（个自然日）</span
              >
              <!-- 一直显示 -->
              <span>，完成回款</span>
            </template>
            <!-- 付款节点时间 && 电梯扶梯 -->
            <template
              v-else-if="
                column.field === 'payTime' &&
                salesMainContractModel.contractMethod === '1'
              "
              v-slot:default="{ row }"
            >
              <vxe-select
                v-model="row.nodeTriggerType"
                style="width: 35%; display: inline-block"
                placement="bottom-start"
                disabled
              >
                <vxe-option
                  v-for="item in salesNodeTriggerTypeForLift"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </vxe-select>
              &nbsp;
              <!-- 自定义 -->
              <vxe-input
                v-if="row.nodeTriggerType === '9'"
                v-model="row.nodeTriggerTypeName"
                style="width: 50%; display: inline-block"
                disabled
              />
              <!-- 非自定义 非月度结算-->
              <vxe-input
                v-if="
                  row.nodeTriggerType != '9' &&
                  salesSecondContractModel.paymentCycle != '2'
                "
                v-model="row.natureDay"
                type="number"
                style="width: 15%; display: inline-block"
                :min="0"
                disabled
              />
              <span
                v-if="
                  row.nodeTriggerType != '9' &&
                  salesSecondContractModel.paymentCycle != '2'
                "
                >（个自然日）</span
              >
              <!-- 非自定义 月度结算-->
              <vxe-input
                v-if="
                  row.nodeTriggerType != '9' &&
                  salesSecondContractModel.paymentCycle === '2'
                "
                v-model="row.monthDay"
                type="number"
                style="width: 15%; display: inline-block"
                :min="0"
                disabled
              />
              <span
                v-if="
                  row.nodeTriggerType != '9' &&
                  salesSecondContractModel.paymentCycle === '2'
                "
                >（个月）</span
              >
              <vxe-input
                v-if="
                  row.nodeTriggerType != '9' &&
                  salesSecondContractModel.paymentCycle === '2'
                "
                v-model="row.natureDay"
                type="number"
                style="width: 15%; display: inline-block"
                :min="0"
                disabled
              />
              <span
                v-if="
                  row.nodeTriggerType != '9' &&
                  salesSecondContractModel.paymentCycle === '2'
                "
                >（日）</span
              >
            </template>
            <!-- 完成付款比例 -->
            <template
              v-else-if="column.field == 'backPayRate'"
              v-slot:default="{ row }"
            >
              <vxe-input
                v-model="row.backPayRate"
                type="number"
                :min="0"
                disabled
              />
            </template>
            <!-- 节点说明 -->
            <template
              v-else-if="column.field == 'nodeMark'"
              v-slot:default="{ row }"
            >
              <!-- 自定义 && 月度结算 && 订单实付款 -->
              <span
                v-if="
                  salesSecondContractModel.paymentCycle === '2' &&
                  row.nodeTriggerType === '9' &&
                  row.nodeType === '2'
                "
              >
                {{ row.nodeTriggerTypeName }}，完成订单总金额
                {{ row.backPayRate }} %的回款
              </span>
              <!-- 自定义 && 月度结算 && 非订单实付款 （用不上）-->
              <!-- 自定义 && 非月度结算 && 订单实付款 -->
              <span
                v-if="
                  salesSecondContractModel.paymentCycle != '2' &&
                  row.nodeTriggerType === '9' &&
                  row.nodeType === '2'
                "
              >
                {{ row.nodeTriggerTypeName }}，完成订单总金额
                {{ row.backPayRate }} %的回款
              </span>
              <!-- 自定义 && 非月度结算 && 非订单实付款（用不上） -->
              <!-- 非自定义 && 月度结算 && 订单实付款 -->
              <span
                v-if="
                  salesSecondContractModel.paymentCycle === '2' &&
                  row.nodeTriggerType != '9' &&
                  row.nodeType === '2'
                "
              >
                {{ row.nodeTriggerTypeName }}
                {{ row.monthDay }} 个月 {{ row.natureDay }} 日，完成订单总金额
                {{ row.backPayRate }} %的回款
              </span>
              <!-- 非自定义 && 月度结算 && 非订单实付款）-->
              <span
                v-if="
                  salesSecondContractModel.paymentCycle === '2' &&
                  row.nodeTriggerType != '9' &&
                  row.nodeType != '2'
                "
              >
                {{ row.nodeTriggerTypeName }}
                {{ row.natureDay }} 个自然日，完成订单总金额
                {{ row.backPayRate }} %的回款
              </span>
              <!-- 非自定义 && 非月度结算 && 订单实付款 -->
              <span
                v-if="
                  salesSecondContractModel.paymentCycle != '2' &&
                  row.nodeTriggerType != '9' &&
                  row.nodeType === '2'
                "
              >
                {{ row.nodeTriggerTypeName }}
                {{ row.natureDay }} 个自然日，完成订单总金额
                {{ row.backPayRate }} %的回款
              </span>
              <!-- 非自定义 && 非月度结算 && 非订单实付款-->
              <span
                v-if="
                  salesSecondContractModel.paymentCycle != '2' &&
                  row.nodeTriggerType != '9' &&
                  row.nodeType != '2'
                "
              >
                {{ row.nodeTriggerTypeName }}
                {{ row.natureDay }} 个自然日，完成订单总金额
                {{ row.backPayRate }} %的回款
              </span>
            </template>
          </vxe-column>
        </vxe-table>
      </el-card>
      <el-card shadow="never" style="margin-top: 1%">
        <template #header>
          <div class="step3Head">
            <span>合同材料</span>
            <div class="step3HeadText" style="display: none">
              <div class="step3HeadTips" style="width: 170px">
                <div
                  class="tipsTitle"
                  style="background-color: rgb(67, 94, 194); color: white"
                >
                  <span>蓝色底色</span>
                </div>
                <div class="tipsContent">
                  <span>复制的材料</span>
                </div>
              </div>
              <div class="step3HeadTips" style="width: 200px">
                <div
                  class="tipsTitle"
                  style="background-color: rgb(204, 204, 204); color: black"
                >
                  <span>灰色底色</span>
                </div>
                <div class="tipsContent">
                  <span>材料字典中不存在</span>
                </div>
              </div>
              <div class="step3HeadTips" style="width: 200px">
                <div class="tipsTitle" style="color: red">
                  <span>文字红色</span>
                </div>
                <div class="tipsContent">
                  <span>和材料字典不同</span>
                </div>
              </div>
            </div>
            <div class="step3EndBtn">
              <el-button color="#1E3485" @click="openViewForSale()"
                >预览/下载</el-button
              >
            </div>
          </div>
        </template>
        <vxe-table
          ref="salesMaterialTableRef"
          border
          show-footer
          header-align="center"
          min-height="450"
          :column-config="{ resizable: true }"
          :row-config="{ isHover: true }"
          :data="salesMaterialTableData"
          :loading="salesMaterialTableLoding"
          :pager-config="salesMaterialTablePage"
          :footer-data="salesMaterialTableFooterData"
          size="mini"
        >
          <vxe-column
            v-for="column in salesMaterialTableColumns"
            :key="column.field"
            :field="column.field"
            :title="column.title"
            :fixed="column.fixed"
            :min-width="column.width"
            :align="column.align"
            show-overflow
          >
            <!-- TODO 可能存在税率计算 -->
            <template
              v-if="column.field == 'materialUnit'"
              v-slot:default="{ row }"
            >
              <vxe-input v-if="row.editType" v-model="row.materialUnit" />
              <span v-if="!row.editType">{{ row.materialUnit }}</span>
            </template>
            <template
              v-else-if="column.field == 'materialBrand'"
              v-slot:default="{ row }"
            >
              <vxe-input v-if="row.editType" v-model="row.materialBrand" />
              <span v-if="!row.editType">{{ row.materialBrand }}</span>
            </template>
            <template
              v-else-if="column.field == 'materialNum'"
              v-slot:default="{ row }"
            >
              <vxe-input v-if="row.editType" v-model="row.materialNum" />
              <span v-if="!row.editType">{{ row.materialNum }}</span>
            </template>
            <template
              v-else-if="column.field == 'includingTaxUnitPrice'"
              v-slot:default="{ row }"
            >
              <vxe-input
                v-if="row.editType"
                v-model="row.includingTaxUnitPrice"
              />
              <span v-if="!row.editType">{{ row.includingTaxUnitPrice }}</span>
            </template>
            <template
              v-else-if="column.field == 'excludingTaxUnitPrice'"
              v-slot:default="{ row }"
            >
              <vxe-input
                v-if="row.editType"
                v-model="row.excludingTaxUnitPrice"
              />
              <span v-if="!row.editType">{{ row.excludingTaxUnitPrice }}</span>
            </template>
            <template
              v-else-if="column.field == 'tax'"
              v-slot:default="{ row }"
            >
              <vxe-input v-if="row.editType" v-model="row.tax" />
              <span v-if="!row.editType">{{ row.tax }}</span>
            </template>
            <template
              v-else-if="column.field == 'includingTaxTotalPrice'"
              v-slot:default="{ row }"
            >
              <vxe-input
                v-if="row.editType"
                v-model="row.includingTaxTotalPrice"
              />
              <span v-if="!row.editType">{{ row.includingTaxTotalPrice }}</span>
            </template>
            <template
              v-else-if="column.field == 'materialMark'"
              v-slot:default="{ row }"
            >
              <vxe-input v-if="row.editType" v-model="row.materialMark" />
              <span v-if="!row.editType">{{ row.materialMark }}</span>
            </template>
            <!-- 复制的行背景色为灰色 -->
            <!-- <template
              v-else-if="column.field == 'isCopy'"
              v-slot:default="{ row }"
            >
              <span v-if="row.isCopy == '0'">否</span>
              <span v-if="row.isCopy == '1'">是</span>
            </template> -->
          </vxe-column>
        </vxe-table>
        <vxe-pager
          v-model:current-page="salesMaterialTablePage.currentPage"
          v-model:page-size="salesMaterialTablePage.pageSize"
          :layouts="[
            'Sizes',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total'
          ]"
          :total="salesMaterialTablePage.total"
          size="small"
          @page-change="salesMaterialTablePageChange"
        />
      </el-card>
      <el-card shadow="never" style="margin-top: 1%">
        <template #header>项目收货人</template>
        <vxe-table
          border
          header-align="center"
          :column-config="{ resizable: true }"
          :row-config="{ isHover: true }"
          :data="salesContractTableData"
          size="mini"
        >
          <vxe-column field="realName" title="姓名" align="center" />
          <vxe-column field="phone" title="联系电话" align="center" />
        </vxe-table>
      </el-card>
    </div>
    <!-- 采购合同详情 -->
    <div v-if="tabPosition === '2'">
      <el-card shadow="never" style="margin-top: 1%">
        <template #header>基本信息</template>
        <el-form label-width="180px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="销售合同">
                <el-input
                  v-model="procureMainContractModel.saleContractName"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="采购单位">
                <el-input
                  v-model="procureMainContractModel.purchaseDeptName"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="供应商">
                <el-select
                  v-model="procureMainContractModel.supplierCategoryName"
                  placeholder="请选择 供应商品类"
                  disabled
                >
                  <el-option
                    v-for="item in supplierCategoryNameOptions"
                    :key="item.key"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="10">
                <el-input
                  v-model="procureMainContractModel.supplierDeptName"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同编号">
                <el-input
                  v-model="procureMainContractModel.contractNo"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同名称">
                <el-input
                  v-model="procureMainContractModel.contractName"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card shadow="never" style="margin-top: 1%">
        <template #header>合约方信息</template>
        <el-form label-width="180px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="合同类型">
                <el-radio-group
                  v-model="procureMainContractModel.contractMethod"
                >
                  <el-radio value="0" size="default" disabled
                    >电线电缆以及光纤光缆</el-radio
                  >
                  <el-radio value="1" size="default" disabled
                    >电梯及扶梯</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="采购负责人">
                <el-input
                  v-model="procureMainContractModel.purchasePersonName"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系电话">
                <el-input
                  v-model="procureMainContractModel.purchasePhone"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="询价单号">
                <el-input
                  v-model="procureMainContractModel.inquiryNo"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目名称">
                <el-input
                  v-model="procureMainContractModel.projectName"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目所属单位">
                <el-input
                  v-model="procureMainContractModel.projectDeptName"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目经理">
                <el-input
                  v-model="procureMainContractModel.projectManager"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目地址">
                <el-input
                  v-model="procureMainContractModel.projectAddress"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card shadow="never" style="margin-top: 1%">
        <template #header>其他信息</template>
        <el-form label-width="180px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同总量">
                <el-input
                  v-model="procureMainContractModel.contractNum"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="差价点（%）">
                <el-input
                  v-model="procureMainContractModel.diffPricePoints"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="返利点（%）">
                <el-input
                  v-model="procureMainContractModel.contractRebatePoints"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同总额含税（元）">
                <el-input
                  v-model="procureMainContractModel.contractTotalPrice"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同总额实际含税（元）">
                <el-input
                  v-model="procureMainContractModel.contractTotalRealPrice"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="10">
                <el-input
                  v-model="procureMainContractModel.contractTotalRealPriceMark"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="签订日期">
                <el-input
                  v-model="procureMainContractModel.signDate"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="付款截止日期">
                <el-input
                  v-model="procureMainContractModel.paymentDeadlineDate"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input
                  v-model="procureMainContractModel.mark"
                  disabled
                  type="textarea"
                  :rows="1"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同附件">
                <el-upload
                  v-model:file-list="procureFileList"
                  class="upload-demo"
                  multiple
                  :on-preview="procureHandlePreview"
                  style="width: 80%"
                  :before-remove="procureBeforeRemove"
                >
                  <el-button :icon="Upload" color="#1E3485" disabled
                    >点击上传</el-button
                  >
                  <template #tip>
                    <div class="el-upload__tip">文件大小不能超过10M</div>
                  </template>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card shadow="never" style="margin-top: 1%">
        <template #header>合同付款方式</template>
        <el-form label-width="180px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="价格类型">
                <el-radio-group
                  v-model="procureSecondContractModel.priceType"
                  disabled
                >
                  <el-radio value="0" size="default">锁定</el-radio>
                  <el-radio value="1" size="default">浮动</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="支付说明">
                <el-input
                  v-model="procureSecondContractModel.priceTypeMark"
                  type="textarea"
                  :rows="1"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                v-if="procureSecondContractModel.priceType === '1'"
                label="基准价（元）"
              >
                <el-input
                  v-model="procureSecondContractModel.basePrice"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                v-if="procureSecondContractModel.priceType === '1'"
                label="涨幅"
              >
                <el-input
                  v-model="procureSecondContractModel.increasePrice"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                v-if="procureSecondContractModel.priceType === '1'"
                label="涨幅比率"
              >
                <el-input
                  v-model="procureSecondContractModel.increaseRate"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="付款周期">
                <el-radio-group
                  v-model="procureSecondContractModel.paymentCycle"
                  disabled
                >
                  <el-radio value="0" size="default">到货结算</el-radio>
                  <el-radio value="1" size="default">款清发货</el-radio>
                  <el-radio value="2" size="default">月度结算</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="付款节点">
                <!-- <el-checkbox label="合同预付款" disabled />
                <el-checkbox label="订单预付款" disabled /> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <vxe-table
          border
          min-height="300px"
          header-align="center"
          :column-config="{ resizable: true }"
          :row-config="{ isHover: true }"
          :data="procureNodePayTableData"
          :loading="procureNodePayTableLoading"
          size="mini"
          style="margin-left: 180px"
        >
          <vxe-column
            v-for="column in procureNodePayTableColumns"
            :key="column.field"
            :field="column.field"
            :title="column.title"
            :min-width="column.width"
            :align="column.align"
          >
            <!-- 节点类型 -->
            <template
              v-if="column.field == 'nodeType'"
              v-slot:default="{ row }"
            >
              <vxe-select
                v-model="row.nodeType"
                placehoder=""
                style="display: inline-block"
                placement="bottom-start"
                disabled
              >
                <vxe-option
                  v-for="item in procureNodeTypeOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </vxe-select>
            </template>
            <!-- 付款节点时间 && 电线电缆 -->
            <template
              v-else-if="
                column.field === 'payTime' &&
                procureMainContractModel.contractMethod === '0'
              "
              v-slot:default="{ row }"
            >
              <vxe-select
                v-model="row.nodeTriggerType"
                style="width: 30%; display: inline-block"
                placement="bottom-start"
                disabled
              >
                <vxe-option
                  v-for="(
                    item, index
                  ) in getProcureAvailableNodeTriggerTypeList(
                    procureSecondContractModel.paymentCycle,
                    row.nodeType
                  )"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                />
              </vxe-select>
              &nbsp;
              <!-- 付款节点时间 - 自定义&&月度结算&&订单实付款 -->
              <vxe-input
                v-if="
                  row.nodeTriggerType === '9' &&
                  procureSecondContractModel.paymentCycle === '2' &&
                  row.nodeType === '2'
                "
                v-model="row.nodeTriggerTypeName"
                style="width: 30%; display: inline-block"
                disabled
              />
              <!-- 付款节点时间 - 自定义&&月度结算&&非订单实付款 (用不上) -->
              <!-- 付款节点时间 - 自定义&&非月度结算&&订单实付款 -->
              <vxe-input
                v-if="
                  row.nodeTriggerType === '9' &&
                  procureSecondContractModel.paymentCycle != '2' &&
                  row.nodeType === '2'
                "
                v-model="row.nodeTriggerTypeName"
                style="width: 30%; display: inline-block"
                disabled
              />
              <!-- 付款节点时间 - 自定义&&非月度结算&&非订单实付款 (用不上) -->
              <!-- 付款节点时间 - 非自定义&&月度结算&&订单实付款 -->
              <vxe-input
                v-if="
                  row.nodeTriggerType != '9' &&
                  procureSecondContractModel.paymentCycle === '2' &&
                  row.nodeType === '2'
                "
                v-model="row.monthDay"
                type="number"
                style="width: 15%; display: inline-block"
                :min="0"
                disabled
              />
              <span
                v-if="
                  row.nodeTriggerType != '9' &&
                  procureSecondContractModel.paymentCycle === '2' &&
                  row.nodeType === '2'
                "
                >（个月）</span
              >
              <vxe-input
                v-if="
                  row.nodeTriggerType != '9' &&
                  procureSecondContractModel.paymentCycle === '2' &&
                  row.nodeType === '2'
                "
                v-model="row.natureDay"
                type="number"
                style="width: 15%; display: inline-block"
                :min="0"
                disabled
              />
              <span
                v-if="
                  row.nodeTriggerType != '9' &&
                  procureSecondContractModel.paymentCycle === '2' &&
                  row.nodeType === '2'
                "
                >（日）</span
              >
              <!-- 付款节点时间 - 非自定义&月度结算&&非订单实付款 -->
              <vxe-input
                v-if="
                  row.nodeTriggerType != '9' &&
                  procureSecondContractModel.paymentCycle === '2' &&
                  row.nodeType != '2'
                "
                v-model="row.natureDay"
                type="number"
                style="width: 15%; display: inline-block"
                :min="0"
                disabled
              />
              <span
                v-if="
                  row.nodeTriggerType != '9' &&
                  procureSecondContractModel.paymentCycle === '2' &&
                  row.nodeType != '2'
                "
                >（个自然日）</span
              >
              <!-- 付款节点时间 - 非自定义&&非月度结算&&订单实付款 -->
              <vxe-input
                v-if="
                  row.nodeTriggerType != '9' &&
                  procureSecondContractModel.paymentCycle != '2' &&
                  row.nodeType === '2'
                "
                v-model="row.natureDay"
                type="number"
                style="width: 15%; display: inline-block"
                :min="0"
                disabled
              />
              <span
                v-if="
                  row.nodeTriggerType != '9' &&
                  procureSecondContractModel.paymentCycle != '2' &&
                  row.nodeType === '2'
                "
                >（个自然日）</span
              >
              <!-- 付款节点时间 - 非自定义&&非月度结算&&非订单实付款 -->
              <vxe-input
                v-if="
                  row.nodeTriggerType != '9' &&
                  procureSecondContractModel.paymentCycle != '2' &&
                  row.nodeType != '2'
                "
                v-model="row.natureDay"
                type="number"
                style="width: 15%; display: inline-block"
                :min="0"
                disabled
              />
              <span
                v-if="
                  row.nodeTriggerType != '9' &&
                  procureSecondContractModel.paymentCycle != '2' &&
                  row.nodeType != '2'
                "
                >（个自然日）</span
              >
              <!-- 一直显示 -->
              <span>，完成回款</span>
            </template>
            <!-- 付款节点时间 && 电梯扶梯 -->
            <template
              v-else-if="
                column.field === 'payTime' &&
                procureMainContractModel.contractMethod === '1'
              "
              v-slot:default="{ row }"
            >
              <vxe-select
                v-model="row.nodeTriggerType"
                style="width: 35%; display: inline-block"
                placement="bottom-start"
                disabled
              >
                <vxe-option
                  v-for="item in procureNodeTriggerTypeForLift"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </vxe-select>
              &nbsp;
              <!-- 自定义 -->
              <vxe-input
                v-if="row.nodeTriggerType === '9'"
                v-model="row.nodeTriggerTypeName"
                style="width: 50%; display: inline-block"
                disabled
              />
              <!-- 非自定义 非月度结算-->
              <vxe-input
                v-if="
                  row.nodeTriggerType != '9' &&
                  procureSecondContractModel.paymentCycle != '2'
                "
                v-model="row.natureDay"
                type="number"
                style="width: 15%; display: inline-block"
                :min="0"
                disabled
              />
              <span
                v-if="
                  row.nodeTriggerType != '9' &&
                  procureSecondContractModel.paymentCycle != '2'
                "
                >（个自然日）</span
              >
              <!-- 非自定义 月度结算-->
              <vxe-input
                v-if="
                  row.nodeTriggerType != '9' &&
                  procureSecondContractModel.paymentCycle === '2'
                "
                v-model="row.monthDay"
                type="number"
                style="width: 15%; display: inline-block"
                :min="0"
                disabled
              />
              <span
                v-if="
                  row.nodeTriggerType != '9' &&
                  procureSecondContractModel.paymentCycle === '2'
                "
                >（个月）</span
              >
              <vxe-input
                v-if="
                  row.nodeTriggerType != '9' &&
                  procureSecondContractModel.paymentCycle === '2'
                "
                v-model="row.natureDay"
                type="number"
                style="width: 15%; display: inline-block"
                :min="0"
                disabled
              />
              <span
                v-if="
                  row.nodeTriggerType != '9' &&
                  procureSecondContractModel.paymentCycle === '2'
                "
                >（日）</span
              >
            </template>
            <!-- 完成付款比例 -->
            <template
              v-else-if="column.field == 'backPayRate'"
              v-slot:default="{ row }"
            >
              <vxe-input
                v-model="row.backPayRate"
                type="number"
                :min="0"
                disabled
              />
            </template>
            <!-- 节点说明 -->
            <template
              v-else-if="column.field == 'nodeMark'"
              v-slot:default="{ row }"
            >
              <!-- 自定义 && 月度结算 && 订单实付款 -->
              <span
                v-if="
                  procureSecondContractModel.paymentCycle === '2' &&
                  row.nodeTriggerType === '9' &&
                  row.nodeType === '2'
                "
              >
                {{ row.nodeTriggerTypeName }}，完成订单总金额
                {{ row.backPayRate }} %的回款
              </span>
              <!-- 自定义 && 月度结算 && 非订单实付款 （用不上）-->
              <!-- 自定义 && 非月度结算 && 订单实付款 -->
              <span
                v-if="
                  procureSecondContractModel.paymentCycle != '2' &&
                  row.nodeTriggerType === '9' &&
                  row.nodeType === '2'
                "
              >
                {{ row.nodeTriggerTypeName }}，完成订单总金额
                {{ row.backPayRate }} %的回款
              </span>
              <!-- 自定义 && 非月度结算 && 非订单实付款（用不上） -->
              <!-- 非自定义 && 月度结算 && 订单实付款 -->
              <span
                v-if="
                  procureSecondContractModel.paymentCycle === '2' &&
                  row.nodeTriggerType != '9' &&
                  row.nodeType === '2'
                "
              >
                {{ row.nodeTriggerTypeName }}
                {{ row.monthDay }} 个月 {{ row.natureDay }} 日，完成订单总金额
                {{ row.backPayRate }} %的回款
              </span>
              <!-- 非自定义 && 月度结算 && 非订单实付款）-->
              <span
                v-if="
                  procureSecondContractModel.paymentCycle === '2' &&
                  row.nodeTriggerType != '9' &&
                  row.nodeType != '2'
                "
              >
                {{ row.nodeTriggerTypeName }}
                {{ row.natureDay }} 个自然日，完成订单总金额
                {{ row.backPayRate }} %的回款
              </span>
              <!-- 非自定义 && 非月度结算 && 订单实付款 -->
              <span
                v-if="
                  procureSecondContractModel.paymentCycle != '2' &&
                  row.nodeTriggerType != '9' &&
                  row.nodeType === '2'
                "
              >
                {{ row.nodeTriggerTypeName }}
                {{ row.natureDay }} 个自然日，完成订单总金额
                {{ row.backPayRate }} %的回款
              </span>
              <!-- 非自定义 && 非月度结算 && 非订单实付款-->
              <span
                v-if="
                  procureSecondContractModel.paymentCycle != '2' &&
                  row.nodeTriggerType != '9' &&
                  row.nodeType != '2'
                "
              >
                {{ row.nodeTriggerTypeName }}
                {{ row.natureDay }} 个自然日，完成订单总金额
                {{ row.backPayRate }} %的回款
              </span>
            </template>
          </vxe-column>
        </vxe-table>
      </el-card>
      <el-card shadow="never" style="margin-top: 1%">
        <template #header>
          <div class="step3Head">
            <span>合同材料</span>
            <div class="step3HeadText" style="display: none">
              <div class="step3HeadTips" style="width: 170px">
                <div
                  class="tipsTitle"
                  style="background-color: rgb(67, 94, 194); color: white"
                >
                  <span>蓝色底色</span>
                </div>
                <div class="tipsContent">
                  <span>复制的材料</span>
                </div>
              </div>
              <div class="step3HeadTips" style="width: 200px">
                <div
                  class="tipsTitle"
                  style="background-color: rgb(204, 204, 204); color: black"
                >
                  <span>灰色底色</span>
                </div>
                <div class="tipsContent">
                  <span>材料字典中不存在</span>
                </div>
              </div>
              <div class="step3HeadTips" style="width: 200px">
                <div class="tipsTitle" style="color: red">
                  <span>文字红色</span>
                </div>
                <div class="tipsContent">
                  <span>和材料字典不同</span>
                </div>
              </div>
            </div>
            <div class="step3EndBtn">
              <el-button color="#1E3485" @click="openViewForPurchase()"
                >预览/下载</el-button
              >
            </div>
          </div>
        </template>
        <vxe-table
          ref="materialTableRef"
          border
          show-footer
          header-align="center"
          min-height="450"
          :column-config="{ resizable: true }"
          :row-config="{ isHover: true }"
          :data="procureMaterialTableData"
          :loading="procureMaterialTableLoding"
          :pager-config="procureMaterialTablePage"
          :footer-data="procureMaterialTableFooterData"
          size="mini"
        >
          <vxe-column
            v-for="column in procureMaterialTableColumns"
            :key="column.field"
            :field="column.field"
            :title="column.title"
            :fixed="column.fixed"
            :min-width="column.width"
            :align="column.align"
            show-overflow
          >
            <!-- TODO 可能存在税率计算 -->
            <template
              v-if="column.field == 'materialUnit'"
              v-slot:default="{ row }"
            >
              <vxe-input v-if="row.editType" v-model="row.materialUnit" />
              <span v-if="!row.editType">{{ row.materialUnit }}</span>
            </template>
            <template
              v-else-if="column.field == 'materialBrand'"
              v-slot:default="{ row }"
            >
              <vxe-input v-if="row.editType" v-model="row.materialBrand" />
              <span v-if="!row.editType">{{ row.materialBrand }}</span>
            </template>
            <template
              v-else-if="column.field == 'materialNum'"
              v-slot:default="{ row }"
            >
              <vxe-input v-if="row.editType" v-model="row.materialNum" />
              <span v-if="!row.editType">{{ row.materialNum }}</span>
            </template>
            <template
              v-else-if="column.field == 'includingTaxUnitPrice'"
              v-slot:default="{ row }"
            >
              <vxe-input
                v-if="row.editType"
                v-model="row.includingTaxUnitPrice"
              />
              <span v-if="!row.editType">{{ row.includingTaxUnitPrice }}</span>
            </template>
            <template
              v-else-if="column.field == 'excludingTaxUnitPrice'"
              v-slot:default="{ row }"
            >
              <vxe-input
                v-if="row.editType"
                v-model="row.excludingTaxUnitPrice"
              />
              <span v-if="!row.editType">{{ row.excludingTaxUnitPrice }}</span>
            </template>
            <template
              v-else-if="column.field == 'tax'"
              v-slot:default="{ row }"
            >
              <vxe-input v-if="row.editType" v-model="row.tax" />
              <span v-if="!row.editType">{{ row.tax }}</span>
            </template>
            <template
              v-else-if="column.field == 'includingTaxTotalPrice'"
              v-slot:default="{ row }"
            >
              <vxe-input
                v-if="row.editType"
                v-model="row.includingTaxTotalPrice"
              />
              <span v-if="!row.editType">{{ row.includingTaxTotalPrice }}</span>
            </template>
            <template
              v-else-if="column.field == 'materialMark'"
              v-slot:default="{ row }"
            >
              <vxe-input v-if="row.editType" v-model="row.materialMark" />
              <span v-if="!row.editType">{{ row.materialMark }}</span>
            </template>
            <!-- 复制的行背景色为灰色 -->
            <!-- <template
              v-else-if="column.field == 'isCopy'"
              v-slot:default="{ row }"
            >
              <span v-if="row.isCopy == '0'">否</span>
              <span v-if="row.isCopy == '1'">是</span>
            </template> -->
          </vxe-column>
        </vxe-table>
        <vxe-pager
          v-model:current-page="procureMaterialTablePage.currentPage"
          v-model:page-size="procureMaterialTablePage.pageSize"
          :layouts="[
            'Sizes',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total'
          ]"
          :total="procureMaterialTablePage.total"
          size="small"
          @page-change="procureMaterialTablePageChange"
        />
      </el-card>
    </div>
    <!-- 审批记录 -->
    <div v-if="tabPosition === '0'">
      <el-card shadow="never" style="margin-top: 1%">
        <template #header>审批记录</template>
        <div class="examine">
          <img src="@/assets/img/examine.png" alt="" />
        </div>
        <vxe-table
          border
          header-align="center"
          :column-config="{ resizable: true }"
          :row-config="{ isHover: true }"
          :data="examineTableData"
          :loading="examineTableLoding"
          size="mini"
          style="margin-top: 1%"
        >
          <vxe-column type="seq" width="60" title="序号" align="center" />
          <vxe-column
            v-for="column in examineTableColumns"
            :key="column.field"
            :field="column.field"
            :title="column.title"
            :min-width="column.width"
            :align="column.align"
            show-overflow
          >
            <template v-slot:default="{ row }">
              {{ row[column.field] }}
            </template>
          </vxe-column>
        </vxe-table>
      </el-card>
    </div>
    <!-- 弹窗组件 -->
    <div class="dialogs">
      <filePreview
        :visible="filePreviewVisible"
        :fileId="fileId"
        :fileType="fileType"
        :fileUrl="fileUrl"
        @close="closeFilePreview"
      />
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { Upload } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import { VxePagerEvents, VxeTablePropTypes } from "vxe-table";
import filePreview from "@/components/filePreview.vue";
import type { UploadUserFile, UploadProps, UploadFile } from "element-plus";
import { getDictDetail } from "@/api/utils";
import {
  getSalesContractDetail,
  getProjectReceiver,
  getNodePayFormData,
  getNodePayTableData,
  getContractMaterialList,
  getContractMaterialFooter,
  getSalesProcureId
} from "@/api/ERP_sales";
import { getProcureContractInfo } from "@/api/ERP_procure";
import { getAuditHistoryTaskList } from "@/api/ERP_public";
////////////////////// 公共 //////////////////////
// 接收路由传参
const route = useRoute();
const queryParams = route.query;
// 默认显示页
let tabPosition = ref("1");
// 预览弹窗
let filePreviewVisible = ref(false);
let fileId = ref("");
let fileType = ref("");
let fileUrl = ref("");
///////////////////// 销售合同详情 /////////////////////
// stepOne-主合同表单数据
let salesMainContractModel = reactive({
  // 合同ID
  id: undefined,
  // 合同类型
  contractType: "0", // 合同类型：0-主合同，1-补充合同
  // 项目信息
  contractMethod: "1", // 合同方式 0-电线电缆，1-电梯
  purchaseDeptId: "", // 采购单位ID - 自动带出不展示
  purchaseDeptName: "", // 采购单位
  projectDeptId: "", // 所属单位ID
  projectDeptName: "", // 项目所属分公司
  projectId: "", // 项目ID - 自动带出不展示
  projectName: "", // 项目名称
  projectAddress: "", // 项目地址
  projectManagerId: "", // 项目联系人ID - 自动带出不展示
  projectManager: "", // 项目联系人
  projectManagerPhone: "", // 项目联系人电话
  // 合约方信息
  supplierCategoryId: "", //供应商品类ID - 自动带出不展示
  supplierCategoryName: "", // 供应商品类
  supplierDeptId: "", // 供应商厂商ID - 自动带出不展示
  supplierDeptName: "", // 供应商厂商
  supplyDeptId: "", // 供应商ID - 自动带出不展示
  supplyDeptName: "", // 供应商
  inquiryNo: "", // 询价单号
  contractNo: "", // 合同编号
  contractName: "", // 合同名称
  purchasePersonId: "", // 采购负责人ID - 自动带出不展示
  purchasePersonName: "", // 采购负责人
  purchasePhone: "", // 联系电话
  isPriceFlag: "1", // 允许超合同金额 0-否，1-是
  isNumFlag: "1", // 允许超合同材料数量 0-否，1-是
  // 其他信息
  contractNum: undefined, // 合同总量
  signDate: "", // 签订日期
  paymentDeadlineDate: "", // 回款截止日期
  contractTotalPrice: undefined, // 合同总额含税（元）
  contractTotalRealPrice: undefined, // 合同总额实际含税（元）
  contractTotalRealPriceMark: "", // 合同总额实际含税备注
  mark: "", // 备注
  contractFile: "", // 合同文件(数组转成字符串格式)
  processInstanceId: "" //审批流程ID
});
// stepTwo-付款节点表单数据
let salesSecondContractModel = reactive({
  // 带出数据
  id: "", // 第二步的主键ID - 新增时不存在不传，编辑时存在
  contractId: "", // 合同ID
  // 表单数据
  priceType: "0", // 价格类型 0-锁定，1-浮动
  priceTypeMark: "", // 支付说明
  basePrice: 0.0, // 基础价格（元）
  increasePrice: 0.0, // 涨幅
  increaseRate: 0.0, // 涨幅比例
  paymentCycle: "0", // 付款周期 0-到货结算, 1-款清发货, 2-月度结算
  paymentReconciliationMonth: 0, // 月度结算时-收货确认对账几月
  paymentReconciliationDay: 0, // 月度结算时-收货确认对账几日(完成对账)
  contractPreStatus: "0", // 合同预付款 0-未开启，1-已开启
  ordePreStatus: "0", // 订单预付款 0-未开启，1-已开启
  nodePaySaveDtoList: [] // 付款节点表数据
});
// 定义数据
let salesFileList = ref<UploadUserFile[]>([]);
const salesFileHandlePreview: UploadProps["onPreview"] = (
  uploadFile: UploadFile
) => {
  if (uploadFile.response) {
    const response = uploadFile.response as unknown as any;
    // fileUrl.value = response.data.url;
    window.open(response.data.url, "_blank");
  } else {
    // fileUrl.value = uploadFile.url;
    window.open(uploadFile.url, "_blank");
  }
  // filePreviewVisible.value = true;
};
const salesFileBeforeRemove = (uploadFile, uploadFiles) => {
  ElMessage.error("当前状态文件不可删除");
  return false;
};
let salesContractTableData = ref([]);
let salesNodePayTableData = ref([]);
let salesNodePayTableLoading = ref(false);
const salesNodePayTableColumns = reactive([
  {
    field: "nodeType",
    title: "节点类型",
    width: 150,
    align: "center",
    formatter({ cellValue, row }) {
      if (cellValue == "0") return "合同预付款";
      else if (cellValue == "1") return "订单预付款";
      else if (cellValue == "2") return "订单实付款";
      else return cellValue;
    }
  },
  {
    field: "payTime",
    title: "付款节点时间",
    width: 500
  },
  {
    field: "backPayRate",
    title: "完成付款比例（%）",
    width: 200
  },
  {
    field: "nodeMark",
    title: "节点说明",
    width: 400
  }
]);
const salesNodeTypeOptions = reactive([
  { value: "0", label: "合同预付款" },
  { value: "1", label: "订单预付款" },
  { value: "2", label: "订单实付款" }
]);
const salesNodeTriggerTypeOptions = reactive([
  { value: "0", label: "合同签订后" }, // 勾选合同预付款 的数据 (未勾选则：全部不可选)
  { value: "1", label: "供应商确认订单后" }, // 勾选订单预付款 的数据 (未勾选则：到货结算、款清发货 可选)
  { value: "2", label: "供应商确认供货后" }, // 到货结算 可选
  { value: "3", label: "项目部确认验收后" }, // 到货结算 月度结算 可选
  { value: "4", label: "对账完成后" }, // 款清发货 可选
  { value: "5", label: "对账确认后" }, // 到货结算 款清发货 可选
  { value: "6", label: "结算确认后" }, // 到货结算 款清发货 可选
  { value: "9", label: "自定义" } // 均 可选
]);
const salesNodeTriggerTypeForLift = reactive([
  { value: "0", label: "预付款，订单签订后" },
  { value: "1", label: "排产款，排期生产后" },
  { value: "2", label: "提货款，收到货物后" },
  { value: "3", label: "到货款，收到货物后" },
  { value: "4", label: "尾款，订单执行完成后" },
  { value: "9", label: "自定义" }
]);
const getSalesAvailableNodeTriggerTypeList = (paymentCycle, nodeType) => {
  const availableOptions = salesNodeTriggerTypeOptions.filter(option => {
    switch (paymentCycle) {
      case "0": // 到货结算
        switch (nodeType) {
          case "0": // 合同预付款
            return ["0"].includes(option.value);
          case "1": // 订单预付款
            return ["1"].includes(option.value);
          default: // 订单实付款
            return ["1", "2", "3", "5", "6", "9"].includes(option.value);
        }
      case "1": // 款清发货
        switch (nodeType) {
          case "0": // 合同预付款
            return ["0"].includes(option.value);
          case "1": // 订单预付款
            return ["1"].includes(option.value);
          default: // 订单实付款
            return ["1", "4", "5", "6", "9"].includes(option.value);
        }
      case "2": // 月度结算
        switch (nodeType) {
          case "0": // 合同预付款
            return ["0"].includes(option.value);
          case "1": // 订单预付款
            return ["1"].includes(option.value);
          default: // 订单实付款
            return ["3", "9"].includes(option.value);
        }
      default:
        switch (nodeType) {
          case "0": // 合同预付款
            return ["0"].includes(option.value);
          case "1": // 订单预付款
            return ["1"].includes(option.value);
          default: // 订单实付款
            return ["9"].includes(option.value);
        }
    }
  });
  return availableOptions;
};
let salesMaterialTableData = ref([]);
let salesMaterialTableFooterData = ref<VxeTablePropTypes.FooterData>([]);
let salesMaterialTableLoding = ref(false);
const salesMaterialTableColumns = reactive([
  {
    field: "materialCode",
    title: "材料编码",
    width: 120,
    align: "center"
  },
  {
    field: "materialName",
    title: "材料名称",
    width: 120,
    align: "center"
  },
  {
    field: "materialSpecs",
    title: "规格",
    width: 180,
    align: "left"
  },
  {
    field: "material_model",
    title: "型号",
    width: 120,
    align: "center"
  },
  {
    field: "materialUnit",
    title: "单位",
    width: 120,
    align: "center"
  },
  {
    field: "materialBrand",
    title: "品牌",
    width: 120,
    align: "center"
  },
  {
    field: "materialNum",
    title: "数量",
    width: 120,
    fixed: "right",
    align: "right"
  },
  {
    field: "includingTaxUnitPrice",
    title: "含税单价（元）",
    width: 120,
    fixed: "right",
    align: "right"
  },
  {
    field: "excludingTaxUnitPrice",
    title: "不含税单价（元）",
    width: 150,
    fixed: "right",
    align: "right"
  },
  {
    field: "tax",
    title: "税率（%）",
    width: 120,
    fixed: "right",
    align: "right"
  },
  {
    field: "includingTaxTotalPrice",
    title: "含税总价（元）",
    width: 150,
    fixed: "right",
    align: "right"
  },
  {
    field: "materialMark",
    title: "备注",
    width: 120,
    fixed: "right",
    align: "center"
  }
]);
const salesMaterialTablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
});
const salesMaterialTablePageChange: VxePagerEvents.PageChange = ({
  currentPage,
  pageSize
}) => {
  salesMaterialTablePage.currentPage = currentPage;
  salesMaterialTablePage.pageSize = pageSize;
  getSalesStepThreeData();
};
// 获取第一步的详情
async function getSalesStepOneData() {
  let params: ApiParams = {};
  params.id = queryParams.id;
  const response: ApiResponse = await getSalesContractDetail(params);
  if (response.code === 200 && response.data) {
    salesMainContractModel.contractType = response.data.contractType;
    salesMainContractModel.contractMethod = response.data.contractMethod;
    salesMainContractModel.purchaseDeptId = response.data.purchaseDeptId;
    salesMainContractModel.purchaseDeptName = response.data.purchaseDeptName;
    salesMainContractModel.projectDeptId = response.data.projectDeptId;
    salesMainContractModel.projectDeptName = response.data.projectDeptName;
    salesMainContractModel.projectId = response.data.projectId;
    salesMainContractModel.projectName = response.data.projectName;
    salesMainContractModel.projectAddress = response.data.projectAddress;
    salesMainContractModel.projectManagerId = response.data.projectManagerId;
    salesMainContractModel.projectManager = response.data.projectManager;
    salesMainContractModel.projectManagerPhone =
      response.data.projectManagerPhone;
    salesMainContractModel.supplierCategoryId =
      response.data.supplierCategoryId;
    salesMainContractModel.supplierCategoryName =
      response.data.supplierCategoryName;
    salesMainContractModel.supplierDeptId = response.data.supplierDeptId;
    salesMainContractModel.supplierDeptName = response.data.supplierDeptName;
    salesMainContractModel.supplyDeptId = response.data.supplyDeptId;
    salesMainContractModel.supplyDeptName = response.data.supplyDeptName;
    salesMainContractModel.inquiryNo = response.data.inquiryNo;
    salesMainContractModel.contractNo = response.data.contractNo;
    salesMainContractModel.contractName = response.data.contractName;
    salesMainContractModel.purchasePersonId = response.data.purchasePersonId;
    salesMainContractModel.purchasePersonName =
      response.data.purchasePersonName;
    salesMainContractModel.purchasePhone = response.data.purchasePhone;
    salesMainContractModel.isNumFlag = response.data.isNumFlag.toString();
    salesMainContractModel.isPriceFlag = response.data.isPriceFlag.toString();
    salesMainContractModel.contractNum = response.data.contractNum;
    salesMainContractModel.signDate = response.data.signDate;
    salesMainContractModel.paymentDeadlineDate =
      response.data.paymentDeadlineDate || "";
    salesMainContractModel.contractTotalPrice =
      response.data.contractTotalPrice;
    salesMainContractModel.contractTotalRealPrice =
      response.data.contractTotalRealPrice;
    salesMainContractModel.contractTotalRealPriceMark =
      response.data.contractTotalRealPriceMark || "";
    salesMainContractModel.mark = response.data.mark || "";
    // 处理合同文件，判空
    if (response.data.contractFile) {
      salesMainContractModel.contractFile = response.data.contractFile;
      JSON.parse(response.data.contractFile).forEach(file => {
        salesFileList.value.push({
          name: file.fileOriginName,
          url: file.fileUrl
        });
      });
    }
    // 审批流程ID
    salesMainContractModel.processInstanceId = response.data.processInstanceId;
  }
}
// 获取当前项目收货人列表
async function getSalesProjectReceiverList() {
  let params: ApiParams = {};
  params.contractId = queryParams.id;
  const response: ApiResponse = await getProjectReceiver(params);
  if (response.code === 200) {
    salesContractTableData.value = response.data.map(item => ({
      id: item.id,
      realName: item.name,
      phone: item.phone,
      tenantId: item.tenantId
    }));
  }
}
// 获取第二步的数据详情
async function getSalesStepTwoData() {
  salesNodePayTableLoading.value = true;
  let params: ApiParams = {};
  params.contractId = queryParams.id;
  try {
    // 获取表单数据
    const formRes: ApiResponse = await getNodePayFormData(params);
    if (formRes.code === 200) {
      salesSecondContractModel.id = formRes.data.id;
      salesSecondContractModel.contractId = formRes.data.contractId;
      salesSecondContractModel.priceType = formRes.data.priceType;
      salesSecondContractModel.priceTypeMark = formRes.data.priceTypeMark;
      salesSecondContractModel.basePrice = formRes.data.basePrice;
      salesSecondContractModel.increasePrice = formRes.data.increasePrice;
      salesSecondContractModel.increaseRate = formRes.data.increaseRate;
      salesSecondContractModel.paymentCycle = formRes.data.paymentCycle;
      salesSecondContractModel.paymentReconciliationMonth =
        formRes.data.paymentReconciliationMonth;
      salesSecondContractModel.paymentReconciliationDay =
        formRes.data.paymentReconciliationDay;
      salesSecondContractModel.contractPreStatus =
        formRes.data.contractPreStatus;
      salesSecondContractModel.ordePreStatus = formRes.data.ordePreStatus;
    } else {
      ElMessage.error("获取合同付款方式表单失败");
    }
    // 获取表格数据
    const tableRes: ApiResponse = await getNodePayTableData(params);
    if (tableRes.code == 200) {
      salesNodePayTableData.value = tableRes.data.records;
    } else {
      ElMessage.error("获取合同付款方式表格数据失败");
    }
  } catch (error) {
  } finally {
    salesNodePayTableLoading.value = false;
  }
}
// 获取第三步的数据详情
async function getSalesStepThreeData() {
  salesMaterialTableLoding.value = true;
  let params: ApiParams = {};
  params.pageIndex = salesMaterialTablePage.currentPage;
  params.pageSize = salesMaterialTablePage.pageSize;
  params.contractId = queryParams.id;
  try {
    const tableRes: ApiResponse = await getContractMaterialList(params);
    const footRes: ApiResponse = await getContractMaterialFooter(params);
    if (tableRes.code == 200) {
      salesMaterialTableData.value = tableRes.data.records;
      salesMaterialTablePage.total = tableRes.data.totalElements;
      // 每行数据插入 editType 字段 控制操作列按钮展示
      salesMaterialTableData.value.forEach((item: any) => {
        item.editType = false;
      });
    } else {
      ElMessage.error("获取合同材料表格数据失败");
    }
    if (footRes.code === 200) {
      salesMaterialTableFooterData.value = [];
      salesMaterialTableFooterData.value.push({
        materialNum: footRes.data.totalNum,
        includingTaxTotalPrice: footRes.data.totalPrice
      });
    } else {
      ElMessage.error("获取合同材料表格页脚数据失败");
    }
  } catch (error) {
  } finally {
    salesMaterialTableLoding.value = false;
  }
}
// 材料表格预览
function openViewForSale() {
  fileId.value = queryParams.id as string;
  fileType.value = "sales";
  filePreviewVisible.value = true;
}
function closeFilePreview(val: boolean) {
  filePreviewVisible.value = val;
}
///////////////////// 采购合同详情 /////////////////////
// stepOne-主合同表单数据
let procureMainContractModel = reactive({
  // 本页特征值
  id: undefined,
  contractNo: "", // 合同编号
  contractName: "", // 采购合同名称
  diffPricePoints: "", // 差价点
  contractRebatePoints: "", // 返利点
  // 采购合同ID
  // 合同类型
  contractType: "0", // 合同类型：0-主合同，1-补充合同
  // 销售合同信息
  saleContractId: "", // 销售合同ID
  saleContractNo: "", // 销售合同编号
  saleContractName: "", // 销售合同名称
  contractMethod: "1", // 合同方式 0-电线电缆，1-电梯
  purchaseDeptId: "", // 采购单位ID - 自动带出不展示
  purchaseDeptName: "", // 采购单位
  projectDeptId: "", // 所属单位ID
  projectDeptName: "", // 项目所属分公司
  projectId: "", // 项目ID - 自动带出不展示
  projectName: "", // 项目名称
  projectAddress: "", // 项目地址
  projectManagerId: "", // 项目联系人ID - 自动带出不展示
  projectManager: "", // 项目联系人
  projectManagerPhone: "", // 项目联系人电话
  supplierCategoryId: "", //供应商品类ID - 自动带出不展示
  supplierCategoryName: "", // 供应商品类
  supplierDeptId: "", // 供应商厂商ID - 自动带出不展示
  supplierDeptName: "", // 供应商厂商
  supplyDeptId: "", // 供应商ID - 自动带出不展示
  supplyDeptName: "", // 供应商
  inquiryNo: "", // 询价单号
  purchasePersonId: "", // 采购负责人ID - 自动带出不展示
  purchasePersonName: "", // 采购负责人
  purchasePhone: "", // 联系电话
  isPriceFlag: "1", // 允许超合同金额 0-否，1-是
  isNumFlag: "1", // 允许超合同材料数量 0-否，1-是
  contractNum: undefined, // 合同总量
  signDate: "", // 签订日期
  paymentDeadlineDate: "", // 回款截止日期
  contractTotalPrice: undefined, // 合同总额含税（元）
  contractTotalRealPrice: undefined, // 合同总额实际含税（元）
  contractTotalRealPriceMark: "", // 合同总额实际含税备注
  mark: "", // 备注
  contractFile: "" // 合同文件(数组转成字符串格式)
});
// stepTwo-付款节点表单数据
let procureSecondContractModel = reactive({
  // 带出数据
  id: "", // 第二步的主键ID - 新增时不存在不传，编辑时存在
  contractId: "", // 合同ID
  // 表单数据
  priceType: "0", // 价格类型 0-锁定，1-浮动
  priceTypeMark: "", // 支付说明
  basePrice: 0.0, // 基础价格（元）
  increasePrice: 0.0, // 涨幅
  increaseRate: 0.0, // 涨幅比例
  paymentCycle: "0", // 付款周期 0-到货结算, 1-款清发货, 2-月度结算
  paymentReconciliationMonth: 0, // 月度结算时-收货确认对账几月
  paymentReconciliationDay: 0, // 月度结算时-收货确认对账几日(完成对账)
  contractPreStatus: "0", // 合同预付款 0-未开启，1-已开启
  ordePreStatus: "0", // 订单预付款 0-未开启，1-已开启
  nodePaySaveDtoList: [] // 付款节点表数据
});
// 定义数据
let procureFileList = ref<UploadUserFile[]>([]);
const procureHandlePreview: UploadProps["onPreview"] = (
  uploadFile: UploadFile
) => {
  if (uploadFile.response) {
    const response = uploadFile.response as unknown as any;
    // fileUrl.value = response.data.url;
    window.open(response.data.url, "_blank");
  } else {
    // fileUrl.value = uploadFile.url;
    window.open(uploadFile.url, "_blank");
  }
  // filePreviewVisible.value = true;
};
const procureBeforeRemove = (uploadFile, uploadFiles) => {
  ElMessage.error("当前状态文件不可删除");
  return false;
};
let procureNodePayTableData = ref([]);
let procureNodePayTableLoading = ref(false);
const procureNodePayTableColumns = reactive([
  {
    field: "nodeType",
    title: "节点类型",
    width: 150,
    align: "center",
    formatter({ cellValue, row }) {
      if (cellValue == "0") return "合同预付款";
      else if (cellValue == "1") return "订单预付款";
      else if (cellValue == "2") return "订单实付款";
      else return cellValue;
    }
  },
  {
    field: "payTime",
    title: "付款节点时间",
    width: 500
  },
  {
    field: "backPayRate",
    title: "完成付款比例（%）",
    width: 200
  },
  {
    field: "nodeMark",
    title: "节点说明",
    width: 400
  }
]);
const procureNodeTypeOptions = reactive([
  { value: "0", label: "合同预付款" },
  { value: "1", label: "订单预付款" },
  { value: "2", label: "订单实付款" }
]);
const procureNodeTriggerTypeOptions = reactive([
  { value: "0", label: "合同签订后" }, // 勾选合同预付款 的数据 (未勾选则：全部不可选)
  { value: "1", label: "供应商确认订单后" }, // 勾选订单预付款 的数据 (未勾选则：到货结算、款清发货 可选)
  { value: "2", label: "供应商确认供货后" }, // 到货结算 可选
  { value: "3", label: "项目部确认验收后" }, // 到货结算 月度结算 可选
  { value: "4", label: "对账完成后" }, // 款清发货 可选
  { value: "5", label: "对账确认后" }, // 到货结算 款清发货 可选
  { value: "6", label: "结算确认后" }, // 到货结算 款清发货 可选
  { value: "9", label: "自定义" } // 均 可选
]);
const procureNodeTriggerTypeForLift = reactive([
  { value: "0", label: "预付款，订单签订后" },
  { value: "1", label: "排产款，排期生产后" },
  { value: "2", label: "提货款，收到货物后" },
  { value: "3", label: "到货款，收到货物后" },
  { value: "4", label: "尾款，订单执行完成后" },
  { value: "9", label: "自定义" }
]);
const getProcureAvailableNodeTriggerTypeList = (paymentCycle, nodeType) => {
  const availableOptions = procureNodeTriggerTypeOptions.filter(option => {
    switch (paymentCycle) {
      case "0": // 到货结算
        switch (nodeType) {
          case "0": // 合同预付款
            return ["0"].includes(option.value);
          case "1": // 订单预付款
            return ["1"].includes(option.value);
          default: // 订单实付款
            return ["1", "2", "3", "5", "6", "9"].includes(option.value);
        }
      case "1": // 款清发货
        switch (nodeType) {
          case "0": // 合同预付款
            return ["0"].includes(option.value);
          case "1": // 订单预付款
            return ["1"].includes(option.value);
          default: // 订单实付款
            return ["1", "4", "5", "6", "9"].includes(option.value);
        }
      case "2": // 月度结算
        switch (nodeType) {
          case "0": // 合同预付款
            return ["0"].includes(option.value);
          case "1": // 订单预付款
            return ["1"].includes(option.value);
          default: // 订单实付款
            return ["3", "9"].includes(option.value);
        }
      default:
        switch (nodeType) {
          case "0": // 合同预付款
            return ["0"].includes(option.value);
          case "1": // 订单预付款
            return ["1"].includes(option.value);
          default: // 订单实付款
            return ["9"].includes(option.value);
        }
    }
  });
  return availableOptions;
};
let procureMaterialTableData = ref([]);
let procureMaterialTableFooterData = ref<VxeTablePropTypes.FooterData>([]);
let procureMaterialTableLoding = ref(false);
const procureMaterialTableColumns = reactive([
  {
    field: "materialCode",
    title: "材料编码",
    width: 120,
    align: "center"
  },
  {
    field: "materialName",
    title: "材料名称",
    width: 120,
    align: "center"
  },
  {
    field: "materialSpecs",
    title: "规格",
    width: 180,
    align: "left"
  },
  {
    field: "material_model",
    title: "型号",
    width: 120,
    align: "center"
  },
  {
    field: "materialUnit",
    title: "单位",
    width: 120,
    align: "center"
  },
  {
    field: "materialBrand",
    title: "品牌",
    width: 120,
    align: "center"
  },
  {
    field: "materialNum",
    title: "数量",
    width: 120,
    fixed: "right",
    align: "right"
  },
  {
    field: "includingTaxUnitPrice",
    title: "含税单价（元）",
    width: 120,
    fixed: "right",
    align: "right"
  },
  {
    field: "excludingTaxUnitPrice",
    title: "不含税单价（元）",
    width: 150,
    fixed: "right",
    align: "right"
  },
  {
    field: "tax",
    title: "税率（%）",
    width: 120,
    fixed: "right",
    align: "right"
  },
  {
    field: "includingTaxTotalPrice",
    title: "含税总价（元）",
    width: 150,
    fixed: "right",
    align: "right"
  },
  {
    field: "materialMark",
    title: "备注",
    width: 120,
    fixed: "right",
    align: "center"
  }
]);
const procureMaterialTablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
});
const procureMaterialTablePageChange: VxePagerEvents.PageChange = ({
  currentPage,
  pageSize
}) => {
  procureMaterialTablePage.currentPage = currentPage;
  procureMaterialTablePage.pageSize = pageSize;
  getProcureStepThreeData();
};
// 获取第一步的详情
async function getProcureStepOneData() {
  let params: ApiParams = {};
  params.id = purchaseContractId.value;
  const response: ApiResponse = await getProcureContractInfo(params);
  if (response.code === 200 && response.data) {
    procureMainContractModel.id = response.data.id;
    procureMainContractModel.contractNo = response.data.contractNo;
    procureMainContractModel.contractName = response.data.contractName;
    procureMainContractModel.diffPricePoints = response.data.diffPricePoints;
    procureMainContractModel.contractRebatePoints =
      response.data.contractRebatePoints;
    procureMainContractModel.contractType = response.data.contractType;
    procureMainContractModel.saleContractId = response.data.saleContractId;
    procureMainContractModel.saleContractNo = response.data.saleContractNo;
    procureMainContractModel.saleContractName = response.data.saleContractName;
    procureMainContractModel.contractMethod = response.data.contractMethod;
    procureMainContractModel.purchaseDeptId = response.data.purchaseDeptId;
    procureMainContractModel.purchaseDeptName = response.data.purchaseDeptName;
    procureMainContractModel.projectDeptId = response.data.projectDeptId;
    procureMainContractModel.projectDeptName = response.data.projectDeptName;
    procureMainContractModel.projectId = response.data.projectId;
    procureMainContractModel.projectName = response.data.projectName;
    procureMainContractModel.projectAddress = response.data.projectAddress;
    procureMainContractModel.projectManagerId = response.data.projectManagerId;
    procureMainContractModel.projectManager = response.data.projectManager;
    procureMainContractModel.projectManagerPhone =
      response.data.projectManagerPhone;
    procureMainContractModel.supplierCategoryId =
      response.data.supplierCategoryId;
    procureMainContractModel.supplierCategoryName =
      response.data.supplierCategoryName;
    procureMainContractModel.supplierDeptId = response.data.supplierDeptId;
    procureMainContractModel.supplierDeptName = response.data.supplierDeptName;
    procureMainContractModel.supplyDeptId = response.data.supplyDeptId;
    procureMainContractModel.supplyDeptName = response.data.supplyDeptName;
    procureMainContractModel.inquiryNo = response.data.inquiryNo;
    procureMainContractModel.purchasePersonId = response.data.purchasePersonId;
    procureMainContractModel.purchasePersonName =
      response.data.purchasePersonName;
    procureMainContractModel.purchasePhone = response.data.purchasePhone;
    procureMainContractModel.isNumFlag = response.data.isNumFlag;
    procureMainContractModel.isPriceFlag = response.data.isPriceFlag;
    procureMainContractModel.contractNum = response.data.contractNum;
    procureMainContractModel.signDate = response.data.signDate;
    procureMainContractModel.paymentDeadlineDate =
      response.data.paymentDeadlineDate || "";
    procureMainContractModel.contractTotalPrice =
      response.data.contractTotalPrice;
    procureMainContractModel.contractTotalRealPrice =
      response.data.contractTotalRealPrice;
    procureMainContractModel.contractTotalRealPriceMark =
      response.data.contractTotalRealPriceMark || "";
    procureMainContractModel.mark = response.data.mark || "";
    // 处理合同文件，判空
    if (response.data.contractFile) {
      procureMainContractModel.contractFile = response.data.contractFile;
      JSON.parse(response.data.contractFile).forEach(file => {
        procureFileList.value.push({
          name: file.fileOriginName,
          url: file.fileUrl
        });
      });
    }
  } else {
    ElMessage.error("获取合同信息失败");
  }
}
// 获取第二步的数据详情
async function getProcureStepTwoData() {
  procureNodePayTableLoading.value = true;
  let params: ApiParams = {};
  params.contractId = purchaseContractId.value;
  try {
    // 获取表单数据
    const formRes: ApiResponse = await getNodePayFormData(params);
    if (formRes.code === 200) {
      procureSecondContractModel.id = formRes.data.id;
      procureSecondContractModel.contractId = formRes.data.contractId;
      procureSecondContractModel.priceType = formRes.data.priceType;
      procureSecondContractModel.priceTypeMark = formRes.data.priceTypeMark;
      procureSecondContractModel.basePrice = formRes.data.basePrice;
      procureSecondContractModel.increasePrice = formRes.data.increasePrice;
      procureSecondContractModel.increaseRate = formRes.data.increaseRate;
      procureSecondContractModel.paymentCycle = formRes.data.paymentCycle;
      procureSecondContractModel.paymentReconciliationMonth =
        formRes.data.paymentReconciliationMonth;
      procureSecondContractModel.paymentReconciliationDay =
        formRes.data.paymentReconciliationDay;
      procureSecondContractModel.contractPreStatus =
        formRes.data.contractPreStatus;
      procureSecondContractModel.ordePreStatus = formRes.data.ordePreStatus;
    } else {
      ElMessage.error("获取合同付款方式表单失败");
    }
    // 获取表格数据
    const tableRes: ApiResponse = await getNodePayTableData(params);
    if (tableRes.code == 200) {
      procureNodePayTableData.value = tableRes.data.records;
    } else {
      ElMessage.error("获取合同付款方式表格数据失败");
    }
  } catch (error) {
  } finally {
    procureNodePayTableLoading.value = false;
  }
}
// 获取第三步的数据详情
async function getProcureStepThreeData() {
  procureMaterialTableLoding.value = true;
  let params: ApiParams = {};
  params.pageIndex = procureMaterialTablePage.currentPage;
  params.pageSize = procureMaterialTablePage.pageSize;
  params.contractId = purchaseContractId.value;
  try {
    const tableRes: ApiResponse = await getContractMaterialList(params);
    const footRes: ApiResponse = await getContractMaterialFooter(params);
    if (tableRes.code == 200) {
      procureMaterialTableData.value = tableRes.data.records;
      procureMaterialTablePage.total = tableRes.data.totalElements;
      // 每行数据插入 editType 字段 控制操作列按钮展示
      procureMaterialTableData.value.forEach((item: any) => {
        item.editType = false;
      });
    } else {
      ElMessage.error("获取合同材料表格数据失败");
    }
    if (footRes.code === 200) {
      procureMaterialTableFooterData.value = [];
      procureMaterialTableFooterData.value.push({
        materialNum: footRes.data.totalNum,
        includingTaxTotalPrice: footRes.data.totalPrice
      });
    } else {
      ElMessage.error("获取合同材料表格页脚数据失败");
    }
  } catch (error) {
  } finally {
    procureMaterialTableLoding.value = false;
  }
}
// 获取所有采购合同数据
function getProcureInfo() {
  // 获取采购合同详情
  getProcureStepOneData();
  getProcureStepTwoData();
  getProcureStepThreeData();
}
// 材料表格预览
function openViewForPurchase() {
  fileId.value = purchaseContractId.value;
  fileType.value = "purchase";
  filePreviewVisible.value = true;
}
///////////////////// 审批记录 /////////////////////
let examineTableData = ref([]);
let examineTableLoding = ref(false);
const examineTableColumns = reactive([
  {
    field: "actName",
    title: "流程节点",
    width: 100,
    align: "center"
  },
  {
    field: "auditDate",
    title: "审批时间",
    width: 100,
    align: "center"
  },
  {
    field: "auditUserName",
    title: "审批人",
    width: 100,
    align: "center"
  },
  {
    field: "auditResultMsg",
    title: "审批结果",
    width: 100,
    align: "center"
  },
  {
    field: "auditMessage",
    title: "审批意见",
    width: 100,
    align: "center"
  }
  // {
  //   field: "attachList",
  //   title: "审批附件",
  //   width: 100,
  //   align: "center"
  // }
]);
// 获取审批记录
async function getExamineTableData() {
  examineTableLoding.value = true;
  let params: ApiParams = {};
  params.processInstanceId = salesMainContractModel.processInstanceId;
  try {
    const response: ApiResponse = await getAuditHistoryTaskList(params);
    if (response.code === 200) {
      examineTableData.value = response.data;
    }
  } catch (error) {
  } finally {
    examineTableLoding.value = false;
  }
}
///////////////////// 公共 /////////////////////
// 供应商品类列表
const supplierCategoryNameOptions = ref([]);
async function getSupplierCategoryNameOptions() {
  const res: any = await getDictDetail({
    key: "supplier_type"
  });
  supplierCategoryNameOptions.value.splice(
    0,
    supplierCategoryNameOptions.value.length
  );
  res.data.forEach((item: any) => {
    supplierCategoryNameOptions.value.push({
      key: item.id,
      label: item.value,
      value: item.key
    });
  });
}
// 判断是否有对应的采购合同
let purchaseContractId = ref("");
async function getIsProcessAlive() {
  let params: ApiParams = {};
  params.id = queryParams.id;
  const response: ApiResponse = await getSalesProcureId(params);
  if (response.data != null) {
    purchaseContractId.value = response.data.purchaseContractId;
  }
}
onMounted(() => {
  // 获取合同详情 - 第一页 - 供应商品类列表字典
  getSupplierCategoryNameOptions();
  // 获取销售合同详情
  getSalesStepOneData();
  getSalesProjectReceiverList();
  getSalesStepTwoData();
  getSalesStepThreeData();
  // 获取是否存在采购合同
  getIsProcessAlive();
});
</script>

<style lang="scss" scoped>
.step3Head {
  .step3HeadBtn {
    display: inline-block;
    margin-left: 1%;
  }
  .step3HeadText {
    display: inline-block;
    width: 600px;
    margin-left: 1%;
    .step3HeadTips {
      display: inline-block;
      font-size: 12px;
      .tipsTitle {
        display: inline-block;
        width: 80px;
        height: 20px;
        border: 1px solid #b8bac2;
        border-radius: 10px;
        text-align: center;
      }
      .tipsContent {
        display: inline;
        margin-left: 5%;
      }
    }
  }
  .step3EndBtn {
    float: right;
  }
}
.examine {
  display: grid;
  place-items: center;
  img {
    height: 15vh;
  }
}
</style>
